<template>
  <div class="DataSourceList">
    <el-row style="text-align: left; margin-bottom: 10px">
      <el-button size="small" type="primary" @click="AddDictClass()"
        >新增分类</el-button
      >
    </el-row>
    <el-row>
      <el-table border size="small" style="width: 100%;" height="calc(100vh - 270px)" :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
        <el-table-column prop="objName" label="类型" >
          <template slot-scope="scope">
            <div @click="viewDetail(scope.row)" style="cursor: pointer;">
              {{scope.row.objName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable" active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              @change="changeswitch(scope.row.objID,scope.row.enable)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" >
          </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="tableData.length"
        v-if="ifShowPagination">
      </el-pagination>
    </el-row>
    <!-- 分类维护抽屉 -->
    <el-drawer
      title="数据源分类"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="名称：">
              <el-input v-model="form.objName" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:">
              <el-input type="textarea" v-model="form.remark" autosize></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="启用：" style="text-align: left">
              <el-switch v-model="form.enable"></el-switch
            ></el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item>
              <el-button size="small" type="primary" @click="GetFormData()">确 定</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item>
              <el-button size="small" @click="handleClose()">取 消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>

export default {
  name: 'DataSourceList',
  data () {
    return {
      tableData: [],
      drawer: false,
      direction: 'rtl',
      form: {
        objName: '',
        remark: '',
        enable: false
      },
      currentPage: 1,
      pageSize: 10,
      ifShowPagination: false,
      isAdd: false
    }
  },
  methods: {
    AddDictClass () {
      this.drawer = true
      this.isAdd = true
    },
    handleClose () {
      this.drawer = false
    },
    handleEdit (index, row) {
      this.drawer = true
      this.form = row
      this.isAdd = false
    },
    async GetFormData () {
      if (this.isAdd === true) {
        this.service
          .post('/api/FieldClassDict/Add', this.form)
          .then((res) => {
            if (res.status === 200) {
              this.drawer = false
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
            }
          })
      } else {
        this.service
          .put('/api/FieldClassDict/Update', this.form)
          .then((res) => {
            if (res.status === 200) {
              this.drawer = false
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
          })
      }
      await this.GetTableData()
    },
    GetTableData () {
      this.service
        .get('/api/FieldClassDict/Get')
        .then((res) => {
          this.tableData = res.data
          if (this.tableData.length > this.pageSize) {
            this.ifShowPagination = true
          } else {
            this.ifShowPagination = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该分类【' + row.objName + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.service.delete('/api/FieldClassDict/Delete?ID=' + row.objID)
          .then((res) => {
            console.log(res)
            if (res.status === 200) {
              this.GetTableData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '删除失败!'
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    changeswitch (objId, rowEnable) {
      console.log(objId)
      console.log(rowEnable)
      this.service.put('/api/FieldClassDict/UpdateStatus?ObjID=' + objId + '&Status=' + rowEnable + '')
        .then((res) => {
          console.log(res)
        })
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    viewDetail (val) {
      console.log(val)
      // 传参
      this.$router.push({
        path: '/Module4/DataSourceSetting',
        query: { id: val.objID }
      })
    }
  },
  created () {
    this.GetTableData()
  }
}
</script>
<style lang="scss" scoped>
.DataSourceList{
  padding-top: 20px;
}
</style>
